<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Questions Admin</title>
</head>
<body>
	<c:set var="message" value="${param.message}"></c:set>
	<c:set var="error" value="${param.error}"></c:set>
	<c:set var="success" value="${param.success}"></c:set>
	<c:set var="user" value="${sessionScope.user}"></c:set>
	<c:if test="${user.userType ne 'Professor'}" >
		<c:redirect url="LoginServlet"></c:redirect>
	</c:if>
	<c:set var="categories" value="${applicationScope.categories}"/>
	<c:set var="questions" value="${requestScope.questions}"></c:set>
	
	<div id="header"><%@ include file="Header.jsp"%></div>
	<div id="content">
	<div id="navbar"><%@ include file="NavigationBar.jsp"%></div>
		
	<div id="main">
	
		<div class="box">
			<div class="box-header well">
				<h2><i class="icon-edit"></i> Create Question</h2>
				<div class="box-icon">
					<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
				</div>
			</div>
			
			<div class="box-content">
				<form class="form-horizontal" action="QuestionsAdminServlet" method="post">
					<fieldset>
						<div class="control-group">
							<br><br>
							<label class="control-label" for="dropdown_type">Question Type</label>
							<div class="controls">
								<select  style="width: 280px" name="type" id="dropdown_type" data-rel="chosen" onchange="toggleDiv();">
									<option value="TrueOrFalse">True or False</option>
									<option value="MultipleChoice">Multiple Choice</option>
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="category_name">Question Category</label>
							<div class="controls">
								<select style="width: 280px" name="category_name" id="filterCategories" data-rel="chosen">
									<c:forEach var="filterCategory" items="${categories}">
										<option value="${filterCategory}">${filterCategory}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="focusedInput">Question</label>
							<div class="controls">
								<textarea style="width: 270px" rows="5" cols="50" name="question_text"></textarea>
							</div>
						</div>
						<label class="control-label" for="type">Choose The Correct Answer</label>
						<div class="control-groups">
							<br><br>
							
							<div class="controls">
								<div id="mc" style="display:none">
									<div id="mainDiv">
										<div class="control-group">
											<label class="radio"><input type="radio" name="answer" value="0"></label>
											<input type="text" name="choice0" class="input-xlarge"/>
										</div>
										<div class="control-group">
											<label class="radio"><input type="radio" name="answer" value="1"></label>
											<input type="text" name="choice1" class="input-xlarge"/>
										</div>
									</div>
									<a id="addChoice" class="btn btn-success"><i class="icon-plus"></i> Add Choice</a>
									<a id="removeChoice" class="btn btn-danger"><i class="icon-remove"></i> Remove Choice</a>
									<br><br>
								</div>
								<div id="tf" style="display:block">
									<label class="radio">
										<input type="radio" name="answer" value="0" class="tf">
										True
									 </label>
									 <br>
									 <label class="radio">
										<input type="radio" name="answer" value="1" class="tf">
										False
									 </label><br><br>
								</div>
							</div>
						</div>
						<div class="form-actions">
							<button type="submit" class="btn btn-primary" name="createQuestion">Create Question</button>
							<button class="btn" type="reset">Reset</button>
						</div>
					</fieldset>	  
				</form>   
			</div>
		</div>
		
			<div class="box">
				<div class="box-header well">
					<h2><i class="icon-list-alt"></i> View Questions</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
					</div>
				</div>
				<div class="box-content">
					<table class="table table-striped table-bordered bootstrap-datatable datatable">
						<thead>
							<tr>
								<th>Question</th>
								<th>Question Type</th>
								<th>Question Category</th>
								<th>Correct Answer</th>
								<th>Choices</th>
							</tr>
						</thead>   
						<tbody>
							<c:forEach var="question" items="${questions}">
								<tr>
									<td>${question.question}</td>
									<td>
										<c:choose>
											<c:when test="${question.questionType eq 'multiplechoice'}">
												Muiltiple Choice
											</c:when>
											<c:otherwise>
												True or False
											</c:otherwise>
										</c:choose>
									</td>
									<td>${question.category}</td>
									<td>${question.correctAnswer.answer}</td>
									<td>
										<c:forEach var="ans" items="${question.choices}">
											${ans.answer}
											<br>
										</c:forEach>
									</td>
								</tr>	
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		
	<c:choose>
	<c:when test="${not empty message}">
	<script>$(document).ready(function() {$.noty({ text: '${message}', type: 'information', layout: 'top'});});</script>
	</c:when>
	<c:when test="${not empty error}">
	<script>$(document).ready(function() {$.noty({ text: '${error}',type: 'error',layout: 'top'});});</script>
	</c:when>
	<c:when test="${not empty success}">
	<script>$(document).ready(function() {$.noty({text: '${success}',type: 'success',layout: 'top'});});</script>
	</c:when>
	</c:choose>
	
	</div>
	</div>
	
	<script>
		$(document).ready(function() {
			$("button[name='createQuestion']").click(function() {
				var success = true;

				$(".help-inline").remove();
				
				if($("textarea[name='question_text']").val().length == 0) {
					$("textarea[name='question_text']").after("<span class='help-inline'>Empty Field!</span>").parent().parent().addClass("error");
					success = false;
				} 
				else{
					$("textarea[name='question_text']").parent().parent().removeClass("error");
				}

				var selectBox = document.getElementById("dropdown_type");
			    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
			    
				if(selectedValue == "MultipleChoice") {
					for(var i=0; i<$('#mainDiv .input-xlarge').length; i++){
						if ($("input[name='choice"+i+"']").val().length == 0){
							$("input[name='choice"+i+"']").after("<span class='help-inline'>Empty Field!</span>").parent().addClass("error");
							success = false;
						}
						else{
							$("input[name='choice"+i+"']").parent().removeClass("error");
						}
					}
				}

				//alert($('#mainDiv .input-xlarge').length);
				
				return success;
			});
		});
	</script>
	
<script>
var i = 2;
$(document).ready(function() {
	check(0, true);
	$('#addChoice').click(function() {
		var inputRadio = "<div class='control-group rDiv'><label class='radio'><div id='uniform-undefined' class='radio'><span class=''><input type='radio' value='"+i+"' name='answer' onclick='check("+i+")'></span></div></label>\n" +
		"<input type='text' name='choice"+(i++)+"' class='input-xlarge'/>\n" +
		"</div>\n";
		$('#mainDiv').append(inputRadio);
	});
	$('#removeChoice').click(function() {
		if(i > 2){
			if($("[type='radio'][class!='tf'][checked='checked']").val() == i-1) check(i-2);
			$('.rDiv:last-child').remove();
			i--;
		}
	});
});

function check(value, tf) {
	if(tf) {
		$(':radio').parent().attr("class", "");
		$("[type='radio'][value='"+value+"'][class='tf']").attr("checked", "checked").parent().attr("class", "checked");
	} else {
		$(':radio').parent().attr("class", "");
		$("[type='radio'][value='"+value+"'][class!='tf']").attr("checked", "checked").parent().attr("class", "checked");
	}
}

function toggleDiv() {
	var selectBox = document.getElementById("dropdown_type");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
	if(selectedValue == "TrueOrFalse") {
		document.getElementById('mc').style.display = 'none';
		document.getElementById('tf').style.display = 'block';
		check(0, true);
	} else {
		document.getElementById('tf').style.display = 'none';
		document.getElementById('mc').style.display = 'block';
		check(0, false);
	}

	$(".help-inline").remove();
	$(".control-group").removeClass("error");
}
</script>

</body>
</html>